<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="color-scheme" content="light dark" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <title>Are The Types Wrong? - Tool for analyzing TypeScript types of npm packages</title>
    <meta name="description" content="Are The Types Wrong? - Tool for analyzing TypeScript types of npm packages" />

    <!-- Open Graph Meta Tags -->
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:creator" content="@atcb" />
    <meta property="og:url" content="https://arethetypeswrong.github.io/" />
    <meta property="og:type" content="website" />
    <meta property="og:title" content="Are The Types Wrong?" />
    <meta property="og:description" content="Tool for analyzing TypeScript types of npm packages" />
    <meta property="og:image" content="https://arethetypeswrong.github.io/icons/android-chrome-512x512.png" />

    <script type="module" src="./main.ts"></script>
    <link rel="stylesheet" href="./main.css" />
    <link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon.png" />
    <link rel="icon" type="image/png" sizes="32x32" href="/icons/favicon-32x32.png" />
    <link rel="icon" type="image/png" sizes="16x16" href="/icons/favicon-16x16.png" />
    <link rel="mask-icon" href="/icons/safari-pinned-tab.svg" color="#3178C6" />
  </head>
  <body>
    <main>
      <div id="header">
        <h1>Are the types wrong?</h1>
        <div>
          <a href="https://github.com/arethetypeswrong/arethetypeswrong.github.io">GitHub / About</a>
        </div>
      </div>
      <form id="form">
        <p>
          <label>
            npm package
            <input
              type="text"
              id="package-spec"
              autofocus
              autocapitalize="none"
              autocorrect="off"
              autocomplete="off"
              spellcheck="false"
            />
          </label>
          <button id="check" disabled>Check</button>
        </p>
        <p>
          or <code>npm pack</code> output
          <input type="file" id="file" accept=".tgz" />
        </p>
        <div id="message"></div>
      </form>
      <div id="package-info" class="display-none"></div>
      <p id="problems"></p>
      <div><table id="resolutions"></table></div>
      <div id="details" class="display-none"></div>
    </main>
    <footer>
      <span>
        core:
        <a
          id="core-version"
          href="https://github.com/arethetypeswrong/arethetypeswrong.github.io/blob/main/packages/core/CHANGELOG.md"
        ></a>
      </span>
      <span>
        web:
        <a id="web-version" href="https://github.com/arethetypeswrong/arethetypeswrong.github.io"></a>
      </span>
      <span>
        typescript:
        <span id="ts-version"></span>
      </span>
    </footer>
  </body>
</html>
